<template>
  <div class="home">
    <div class="welcome">
      <div class="welcome-left">
        <p class="tip">欢迎回来</p>
        <div class="welcome-info">
          <p class="welcone-content">
            {{ welcomeFont.content }} <span>--{{ welcomeFont.name }}</span>
          </p>
        </div>
        <p class="welcome-sign">
          The best time to plant a tree is ten years ago。The second-best is
          now。
        </p>
      </div>
      <div class="welcome-right">
        <Wheather></Wheather>
      </div>
    </div>
    <div class="statistic">
      <a-row>
        <a-col
          v-for="(item, index) in statisticList"
          :key="index"
          :span="6"
          style="text-align: center"
        >
          <a-statistic
            :title="item.title"
            :value="item.value"
            class="statistic-item"
          >
            <template #prefix>
              <div class="statistic-icon">
                <component :is="item.icon"></component>
              </div>
            </template>
          </a-statistic>
        </a-col>
      </a-row>
    </div>
    <div class="home-content">
      <div class="charts">
        <Charts></Charts>
        <div class="charts-content">
          <div>
            <a-card title="线上热门博客">
              <a-table
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'title'">
                    <div class="table-title">{{ record.title }}</div>
                  </template>
                  <template v-if="column.key === 'username'">
                    <i
                      style="color: skyblue; cursor: pointer; font-weight: bold"
                      >{{ record.username }}</i
                    >
                  </template>
                </template>
              </a-table>
            </a-card>
          </div>
          <UserType></UserType>
        </div>
      </div>
      <!-- 用户信息 -->
      <div class="info">
        <Timer></Timer>
        <UserCard></UserCard>
        <Notice></Notice>
        <a-card title="快捷入口">
          <div style="display: flex; gap: 10px">
            <a-button>发布博客</a-button>
            <a-button>发布树洞</a-button>
            <a-button>用户设置</a-button>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import Notice from "@/components/Notice/index.vue";
import Charts from "@/components/Charts/index.vue";
import UserCard from "@/components/UserCard/index.vue";
import Wheather from "@/components/Wheather/index.vue";
import UserType from "@/components/UserType/index.vue";
import Timer from "@/components/Timer/index.vue";
import {
  FolderViewOutlined,
  MessageOutlined,
  ShareAltOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import axios from "axios";
import { getHotBlog } from "@/api/blog.js";
import { h, reactive, ref } from "vue";
import dayjs from "dayjs";
let welcomeFont = ref({});
const dataSource = ref([]);

const columns = ref([
  {
    title: "博客名",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "发布人",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "发布日期",
    dataIndex: "pub_date",
    key: "pub_date",
  },
]);
const statisticList = reactive([
  {
    title: "活跃用户",
    value: getData(),
    icon: h(UserOutlined),
  },
  {
    title: "访问量",
    value: getData(),
    icon: h(FolderViewOutlined),
  },
  {
    title: "分享量",
    value: getData(),
    icon: h(ShareAltOutlined),
  },
  {
    title: "评论量",
    value: getData(),
    icon: h(MessageOutlined),
  },
]);

// 获取随机数据
function getData() {
  return Math.floor(Math.random() * 300);
}

// 获取鸡血句子
const init = async () => {
  let res = await axios.get("https://api.xygeng.cn/one");
  if (!res) return;
  welcomeFont.value = res.data.data;
};
// 获取热门博客
const getHotData = async () => {
  let res = await getHotBlog();
  if (res && res.status === 200) {
    res.data.forEach((item) => {
      dataSource.value.push({
        title: item.title,
        username: item.username,
        pub_date: dayjs(item.pub_date).format("YYYY-MM-DD"),
      });
    });
  }
};
init();
getHotData();
</script>


<style lang="scss" scoped>
.home {
  width: 100%;

  .welcome {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    padding: 20px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    .welcome-left {
      width: 100%;

      .welcome-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #909399;

        .welcome-content {
          width: 100%;
          height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          line-clamp: 1;
          overflow: hidden;
          margin: 0 !important;
        }

        .welcome-author {
          width: 100%;
          text-align: end;
          margin: 0 !important;
        }
      }

      .welcome-sign {
        margin: 0;
        font-size: 14px;
        margin-top: 10px;
        color: #a8abb2;
      }
    }

    .welcome-right {
      width: 100%;
    }
  }

  .statistic {
    width: 100%;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;

    .statistic-icon {
      color: #909399;
      margin-right: 10px;
    }
  }

  .home-content {
    width: 100%;
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 10px;
    padding: 10px 0;

    .charts {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .charts-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;

        .table-title {
          width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
  }
}

:deep(.ant-card-body) {
  padding: 10px 5px;
}
</style>